<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3</title>
    <link rel="stylesheet" href="./index.css?delay=2000">
</head>
<body>
    <div class="green">hello</div>
    <!-- dom解析完<div>hello</div>后，会暂停ParseHTML，然后等待css加载完成后，再执行下方的js脚本 -->
    <script>
      // js执行的时候，如果上方有css资源，则要等待css加载完毕后才会执行。
        console.log('3s css执行完成')
        let s = 0; var start = Date.now();
        for(let i = 0; i < 100 * 1000 * 1000;i++){
            s+=i;
        }
        console.log('4s js执行完成')
        // 1亿: time 1115   1千万：time 175
        // console.log('time', Date.now() - start);
    </script>
    <!-- js执行完成后，再去解析<div>world</div> -->
    <!-- <link rel="stylesheet" href="./gray.css?delay=5000"> -->
    <!-- 下方的div 'world'，必须等待gray.css加载完毕，才会渲染 -->
    <div class="gray">world</div>

    <!-- 3、js会阻塞dom解析，需要暂停DOM解析去执行javascript 
         4、js可能会操作样式,所以需要等待css样式加载完成 -->
    <!-- 在继续加载 -->
    <!-- js会阻塞html解析，也会阻塞渲染。js要等上面的css加载完毕，保证页面js可以操作样式 -->
</body>
</html>